<template>
    <div id="salesChangePassword">
        <h2>修改密码</h2>
        <div class="salesChangePassword">
            <el-form
                :model="ruleForm"
                status-icon
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
            >
                <el-form-item label="原密码" prop="password">
                    <el-input v-model="theSale.password" disabled></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="pass">
                    <el-input
                        type="password"
                        v-model="ruleForm.pass"
                        autocomplete="off"
                    ></el-input>
                </el-form-item>
                <el-form-item label="确认新密码" prop="checkPass">
                    <el-input
                        type="password"
                        v-model="ruleForm.checkPass"
                        autocomplete="off"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')"
                        >提交</el-button
                    >
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions } = createNamespacedHelpers("sales");
export default {
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入密码"));
            } else {
                if (this.ruleForm.checkPass !== "") {
                    this.$refs.ruleForm.validateField("checkPass");
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请再次输入密码"));
            } else if (value !== this.ruleForm.pass) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };
        return {
            id: localStorage.getItem("_id"),
            // // 该id用来做测试，后续需删除
            // id: "5feb0cd0f2590000ca003f33",
            ruleForm: {
                pass: "",
                checkPass: "",
            },
            rules: {
                pass: [{ validator: validatePass, trigger: "blur" }],
                checkPass: [{ validator: validatePass2, trigger: "blur" }],
            },
        };
    },
    computed: {
        ...mapState(["theSale"]),
    },
    methods: {
        ...mapActions(["changeSalesPassword", "getSalesById"]),
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.changeSalesPassword(this.ruleForm.pass);
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
    // 后续需修改输入的id内容
    mounted() {
        this.getSalesById(this.id);
    },
};
</script>

<style lang="scss">
#salesChangePassword {
    padding-left: 20px;
    & > h2 {
        padding-left: 10px;
        margin-bottom: 20px;
        height: 50px;
        line-height: 50px;
        text-align: left;
        border-bottom: 1px solid lightGray;
    }
    .salesChangePassword {
        display: flex;
        .el-form {
            .el-form-item {
                text-align: left;
                .el-input {
                    width: 300px;
                    .el-input__inner {
                        width: 300px;
                    }
                }
            }
        }
    }
}
</style>